<template>
      <div id="app">
            <HomeHeader></HomeHeader>
            <div class="main">
                  <router-view></router-view>
            </div>
      </div>
</template>

<script>
import HomeHeader from './components/home/homeHeader'

export default {
      name: 'App',
      data () {
            return {
            }
      },
      components: {
            HomeHeader,
      },
      methods: {
      },
      mounted(){
      }
}
</script>

<style lang="less">
body,div,p,ul,li,ol,dl,dd,dt,h1,h2,h3,h4,h5,h6,span,pre,i,input,a,button,iframe,select,table,tr,th,td,label,textarea{
      padding: 0;
      margin: 0;
      -webkit-appearance:none;
      -webkit-tap-highlight-color:rgba(0,0,0,0);
      outline: none;
      -webkit-overflow-scrolling: touch;
      word-wrap:break-word;
}
img, .cancel-default{
      padding: 0;
      margin: 0;
      transition: all 1s;
}
h1,h2,h3,h4,h5,h6{
      font-size: 100%;
      font-weight: normal;
}
li{
      list-style: none
}
i{
      font-style: normal;
}
a, a:hover{
      text-decoration: none;
}
img{
      border: 0 none;
      vertical-align: top;
}
.clearfix{
      *zoom: 1;
}
.clearfix:after{
      content: ".";
      height: 0;
      visibility: hidden;
      display: block;
      clear: both;
}
body,button{
      font-family: "微软雅黑";
}
.index-enter-active,.index1-enter-active {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      z-index: 1;
      transition: all .3s;
} 
.index-leave-active,.index1-leave-active {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      z-index: -1;
      transition: all .3s;
}
.index-enter, .index-leave-to{
      transform: translate(20px, 0);
      opacity: 0;
}
.index1-enter, .index1-leave-to{
      transform: translate(-20px, 0);
      opacity: 0;
}
.main{
      position: relative;
      height: calc(100vh - 60px);
      overflow: auto;
}
</style>
